import React, { Component } from 'react';
import { Card, Spin, Icon, Alert} from 'antd';
import './ui.less';
class loadings extends Component {
    render() {
        const icon = <Icon type="loading" style={{fontSize: 24}}/>
        return (
            <div>
                <Card title="Spin用法">
                    <Spin size="small"/>
                    <Spin/>
                    <Spin size="large"/>
                    <Spin indicator = {icon}/>
                </Card>
                <Card title="内容遮罩">
                    <Spin>
                        <Alert
                            message="React"
                            description="欢迎学习React实战课程"
                            type="info"    
                        />
                    </Spin>
                    <Spin tip="加载中..." indicator={icon}>
                        <Alert
                            message="React"
                            description="欢迎学习React实战课程"
                            type="success"    
                        />
                    </Spin>
                </Card>
            </div>
        );
    }
}

export default loadings;